<template>
  <div class="logistics_box">
    <btnGroup title="物流总概" :btn-list="btnList" :current-btn-active="btnActive" @change="selectChange" />
    <div class="graph_data">
      <div class="graph-chart">
        <lineChart id="logistics_echart" heights="360px" :legend-data="legendData" :series-data="seriesData" :x-axis-data="xAxisData" />
      </div>
      <div v-if="viewData" class="data-list">
        <li>
          <span class="left_span">运输单数量</span>
          <span class="count-number right_span">{{ viewData.statisticsDriver.logisticsNumber }}</span>
        </li>
        <li>
          <span class="left_span">运输单金额/元</span>
          <span class="count-number right_span">{{ viewData.statisticsDriver.logisticsMoney }}</span>
        </li>
        <li>
          <span class="left_span">物流支出金额/元</span>
          <span class="count-number right_span">{{ viewData.statisticsDriver.expensesMoney }}</span>
        </li>
        <li>
          <span class="left_span">货物总量</span>
          <span class="count-number right_span">{{ viewData.statisticsDriver.logisticsTotalWeight }}</span>
        </li>
        <li>
          <span class="left_span">驾驶员数量</span>
          <span class="count-number right_span">{{ viewData.hardwareData.driverNumber }}</span>
        </li>
        <li>
          <span class="left_span">自营车辆</span>
          <span class="count-number right_span">{{ viewData.hardwareData.carNumber }}</span>
        </li>
        <li>
          <span class="left_span">外调车辆</span>
          <span class="count-number right_span">{{ viewData.hardwareData.otherCarNumber || 0 }}</span>
        </li>
        <!-- <li>
          <span>业务员数量</span>
          <span class="count-number">96</span>
        </li> -->
      </div>
    </div>
  </div>
</template>

<script>
import btnGroup from '@/components/TopBtnGroup'
import lineChart from '@/components/Echart/line_chart'
import { logisticsEchartData, logisticsData } from '@/api/data'
import formDate from '@/utils/formatDate'
export default {
  name: 'Procurement',
  components: { btnGroup, lineChart },
  data() {
    return {
      btnActive: 'month',
      btnList: [
        // { 'text': '当日', 'val': 'day' },
        { 'text': '本月', 'val': 'month' },
        { 'text': '本周', 'val': 'week' },
        { 'text': '季度', 'val': 'quarter' },
        { 'text': '本年', 'val': 'years' },
        { 'text': '全部', 'val': 'all' }
      ],
      xAxisData: [],
      legendData: { data: ['运输数量', '运输单金额', '物流支出金额', '货物总量'], selected: { '运输数量': false, '运输单金额': true, '物流支出金额': false, '货物总量': false }},
      seriesData: [
        {
          name: '运输数量',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '运输单金额',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '物流支出金额',
          type: 'line',
          stack: '总量',
          data: []
        },
        {
          name: '货物总量',
          type: 'line',
          stack: '总量',
          data: []
        }
      ],
      viewData: null
    }
  },
  created() {
    this.$nextTick(() => {
      this.init(2) // 默认本月
    })
  },
  methods: {
    async init(type) {
      const result = await logisticsEchartData({ findType: type })
      if (result.code === 200) {
        const arr = result.data.chart
        this.xAxisData = []
        this.seriesData[0].data = []
        this.seriesData[1].data = []
        this.seriesData[2].data = []
        this.seriesData[3].data = []
        arr.forEach(element => {
          console.log(element)
          if (type === -1) {
            this.xAxisData.push(element.createYear)
          } else if (type === 1) {
            const str = element.createDate
            this.xAxisData.push(formDate.getAssignDateWeek(str))
          } else if (type === 2) {
            const str = element.createDate
            this.xAxisData.push(formDate.getDateTimeDate(str))
          } else if (type === 3 || type === 4) {
            const str = element.createDate
            if (str) {
              this.xAxisData.push(formDate.getYearMonth(str))
            } else {
              this.xAxisData.push(element.createMonth)
            }
          }
          this.seriesData[0].data.push(element.logisticsNumber)
          this.seriesData[1].data.push(element.logisticsMoney)
          this.seriesData[2].data.push(element.expensesMoney)
          this.seriesData[3].data.push(element.logisticsTotalWeight)
        })
      }
      var result2 = await logisticsData({ findType: type })
      if (result2.code === 200) this.viewData = result2.data
    },
    selectChange(val) {
      switch (val) {
        case 'all': // 全部
          this.init(-1)
          break
        case 'day':
          // this.init(0)
          break
        case 'week': // 本周
          this.init(1)
          break
        case 'month': // 本月
          this.init(2)
          break
        case 'quarter': // 季度
          this.init(3)
          break
        case 'years': // 本年
          this.init(4)
          break
        default:
          break
      }
    }
  }
}
</script>

<style scoped lang="scss" >
.logistics_box{
  padding: 20px;
}
.graph_data{
  display: flex;
  margin-top: 10px;
}
.graph-chart{
  width: 70%;
}
.data-list{
  width: 28%;
  margin-left: 1%;
  margin-top: 10px;
  height: 340px;
  border: 1px solid #eee;
  font-size: 14px;
  color: #151B25FF;
  li{
   list-style-type:none;
   padding: 12px 20px;
   border-bottom: 1px solid #eee;
   display: flex;
   justify-content: space-around;
   span{
     flex: 1;
     padding: 0 20px;
   }
  }
  .left_span{text-align: right;}
  .right_span{text-align: left;}

   li:nth-of-type(odd){ background:#f1f1f1;}
   li:nth-of-type(even){ }
   li:last-child{border-bottom: none;}
   .count-number{font-weight: bold;}
}

</style>
